<template>
  <div class="main">
    <div class="m-header">
      <!-- <div class="title">共 {{bookList.length}} 部作品</div> -->
      <!-- 搜索 -->
      <!-- 按名称和分类查询 -->
      <div class="m-search">
        <el-row :gutter="20">
          <el-col :span="20">
            <el-input v-model="sBookName" placeholder="请输入书籍名称" @change="search"></el-input>
          </el-col>
          <!-- <el-col :span="10">
            <el-select v-model="sClassifyId" placeholder="请选择书籍分类">
              <el-option
                v-for="item in classifyList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-col> -->
          <el-col :span="4">
            <el-button @click="search">搜索</el-button>
          </el-col>
        </el-row>
      </div>
      <el-button
        class="new"
        type="text"
        @click="newBook"
      >新建书籍</el-button>
    </div>
    <div class="split-line"></div>
    <div class="m-content">
      <el-table
        :data="bookList"
        style="width: 100%">
        <el-table-column label="作品信息" width="200">
          <template slot-scope="scope">
            <div class="m-c-item">
              <div class="cover">
                <img
                  :src="scope.row.cover || szeImg"
                  alt="书籍封面"
                  srcset
                  @error="imgErrorFn"
                />
              </div>
              <div class="m-c-right">
                <div class="m-c-r-item name"> {{scope.row.name}} </div>
                <div class="m-c-r-item author"> {{scope.row.author}} </div>
                <div class="m-c-r-item status"> {{ scope.row.status | getStatusName}} </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="classifyName"
          label="作品分类"
          width="180">
        </el-table-column>
        <el-table-column
          prop="pv"
          label="浏览量">
        </el-table-column>
        <el-table-column
          prop="cv"
          label="点击量">
        </el-table-column>
        <el-table-column
          label="操作"
          width="500px"
          >
          <template slot-scope="scope">
            <div class="opr">
              <el-button :disabled="scope.row.canReadOnLine===0" @click="newCategory(scope.row)">新建章节</el-button>
              <el-button :disabled="scope.row.canReadOnLine===0" @click="handleCategory(scope.row)">管理章节</el-button>
              <el-button @click="editBook(scope.row)">编辑书籍</el-button>
              <el-button @click="uploadBook(scope.row)" :disabled="scope.row.status===1">批量上传章节</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="m-footer">
      <el-pagination
        layout="prev, pager, next"
        background
        :total="total"
        @current-change = "handleCurrentPage"
        >
      </el-pagination>
      <div>共{{total}}本</div>
    </div>
  </div>
</template>
<script>
import szeImg from '@/assets/book/lyc.jpg'
import { getAllBook,getClassify,getBooksByName } from '@/api/book.js'
export default {
  data() {
    return {
      szeImg: szeImg,
      bookList: [],
      classifyList:[],
      beEditBookObj:null,
      sBookName: '',  // 搜索的书籍名称
      // sClassifyId: '', // 搜索书籍分类
      pageIndex: 1,
      pageSize: 10,
      total:0,
      
    }
  },
  filters: {
    getStatusName(val) {
      return val === 0 ? '连载中' : '已完成'
    },
    getShowName(val) {
      return val === 1 ? '上架中' : '已下架'
    }
  },

  created() {
    // 获取图书列表
    this.init()
  },
  methods: {
    async init() {
      const classifyResult = await getClassify()
      if (classifyResult.code === 0) {
        this.classifyList = classifyResult.data
      } else {
        this.$message('请求分类接口报错')
      }
      this.getBookList()
    },
    imgErrorFn(event){
      console.log('imgErrorFn:',event)
    },
    async getBookList(){
      const result = await getAllBook({
        offset : (this.pageIndex - 1) * this.pageSize,
        limit : this.pageSize
      })
      if (result.code === 0) {
        this.bookList = result.data.list
        this.total = result.data.total
        // console.log('this.total:',this.total)

      } else {
        this.$message('请求书籍接口报错')
      }
    },    
    handleCurrentPage(curPage) {
      // 翻页
      this.pageIndex = curPage
      this.getBookList()
      console.log('curPage:',curPage)
    },
    newBook() {
      // 新建书籍
      this.$router.push('/library/book')
    },
    newCategory(book) {
      // 新建章节
      this.$router.push('/library/category?bookId=' + book.id + '&bookName='+book.name)
    },
    handleCategory(book) {
      console.log('book:', book)
      // 管理章节
      this.$router.push('/library/category/?bookId=' + book.id + '&bookName='+book.name)
    },
    editBook(book){
      let baseUrl = process.env.VUE_APP_BASE_API
      let bookData = Object.assign({},book,{cover:book.cover.replace(baseUrl,'')})
      localStorage.setItem('beEditBookObj',JSON.stringify(bookData))
      this.$router.push({path:'/library/book',query:{
        type:'edit'
      }})
    },
    uploadBook(book){
      this.$router.push({path:'/library/uploadBook?bookId='+book.id+'&bookName='+book.name+'&classifyId='+book.classifyId})
    },
    search(){
      // 搜索书籍
      // console.log('this.sBookName:',this.sBookName)
      if(this.sBookName){
        getBooksByName(this.sBookName).then(res=>{
          if(res.code === 0){
            this.bookList = res.data
            this.total = res.data.length
          }
        })
      }
      
    }
  },
}
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: 20px;
  .m-header {
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding: $contentPadding;
    display: flex;
    justify-content: space-between;
    border-radius: 1px solid #e8e8e8;
    box-sizing: border-box;
    align-items: center;
    .m-search{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      .el-input{
      }
      .el-select{
      }
    }
  }
  .m-content {
    margin-top: $contentPadding;
    padding: 10px;
    width: 100%;
    .m-c-item {
      margin-top: $contentPadding;
      display: flex;
      margin-top: 10px;
      .cover {
        width: 80px;
        height: 100px;
        flex-shrink: 0;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .m-c-right{
        margin-left: 10px;
      }
    }
    .opr{
      display: flex;
      
      .el-button{
        margin-top:10px;
      }
    }
  }
  .m-footer{
    padding:20px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}
</style>

